<template>
    <el-card shadow="never" style="border: 1px solid red; width: 1150px; border-radius: 4px;">
        <div class="search-container">
            <p class="textitem flex-start" style="font-size: 18px; margin-bottom: 16px;" placeholder="请输入关键字">
                新增服务项目
            </p>
        </div>
        <!-- 分割线 -->
        <div class="line" style="border-top: 1px solid #e4e7ed; margin: 0 16px;"></div>


        <el-form :model="formData" :rules="formRules" label-width="100px" style="padding: 24px;">
            <div class="form-row">
                <el-form-item label="项目名称">
                    <el-input v-model="formData.name" style="width: 200px; height: 40px;margin-right: 40px;"
                        placeholder="请输入" />
                </el-form-item>

                <el-form-item label="服务次数" prop="orgName">
                    <el-input v-model="formData.count" style="width: 200px; height: 40px;   margin-right: 15px;"
                        placeholder="请输入" />
                    <!-- 这部分没写完------------------------------------------------ -->
                    <el-radio size="large" style="fill: #2984F8;">不限次数</el-radio>
                    <el-radio-group>

                    </el-radio-group>
                </el-form-item>

            </div>

            <div class="form-row">
                <el-form-item label="项目类型">
                    <el-input v-model="formData.type" style="width: 200px; height: 40px;margin-right: 40px;"
                        placeholder="请输入" />
                </el-form-item>

                <el-form-item label="项目原价">
                    <el-input v-model="formData.price" style="width: 200px; height: 40px;margin-right: 15px;"
                        placeholder="请输入" />
                    <span style="color: #999;">元</span>
                </el-form-item>
            </div>


            <div class="form-row">
                <el-form-item label="服务介绍">
                    <el-input type="textarea" v-model="formData.intro" :rows="4" style="width: 578px; height: 120px;"
                        placeholder="请输入" />
                </el-form-item>
            </div>
            <div class="line" style="border-top: 1px solid #e4e7ed; margin: 0 16px;"></div>
            <!-- 操作按钮 -->
            <div class="form-row" style="justify-content: flex-start; margin-top: 24px;">
                <el-button type="primary" @click="handleSave">保存</el-button>
                <el-button @click="handleReset" style="margin-left: 12px;">返回</el-button>
            </div>
        </el-form>
    </el-card>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { ElForm, ElMessage, ElButton, ElInput } from 'element-plus';
import { addServiceItemsApi } from '@/api/service';

// 表单数据
const formData = ref({
    _id: '',
    name: '',
    count: '',
    type: '',
    price: '',
    intro: ''
});

// 表单校验规则
const formRules = ref({
    name: [
        { required: true, message: '请输入机构名称', trigger: 'blur' }
    ],
    address: [
        { required: true, message: '请输入机构地址', trigger: 'blur' }
    ],
    phone: [
        { required: true, message: '手机号不能为空', trigger: 'blur' },
        {
            validator(_: any, value: string) {
                const phoneRegExp = /^1[3456789]\d{9}$/
                return phoneRegExp.test(value);
            },
            message: '手机号格式不正确',
            trigger: 'blur'
        }
    ]
});

// 保存表单
const handleSave = () => {
    ElForm.useForm(formRef).validate((valid: boolean) => {
        if (valid) {
            ElMessage.success('保存表单成功！');
            handleReset();
        }
    });
};

// 重置表单
const handleReset = () => {
    formData.value = {
        _id: '208902',
        name: '',
        image: '',
        contacts: '',
        phone: '',
        address: '',
        intro: ''
    };
};

// 表单引用
const formRef = ref<InstanceType<typeof ElForm> | null>(null);
// 新增机构的数据
onMounted(() => {
    addOrganization();
});
//新增
function addOrganization() {
    addServiceItemsApi({})
        .then(res => {
            if (res.code === 200) {

            }
        })
        .catch((err: any) => {
            console.error('新增服务项目失败', err);
            ElMessage.error('新增服务项目数据失败，请稍后重试');
        });
}

</script>

<style scoped lang="scss">
.search-container {
    padding: 10px 0;
    background: #fff;
    border-radius: 4px;
}



.textitem {
    position: relative;
    padding-left: 12px;
    /* 给蓝色小条留出空间 */
}

.flex-start {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.textitem::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 20px;
    background-color: rgba(41, 132, 248, 1);
    border-radius: 8px;
}


.form-row {
    display: flex;
    align-items: center;
    margin-bottom: 16px;

    >.el-form-item {
        margin-right: 0;
        margin-left: 0;

        &:not(:first-child) {
            margin-left: 24px;
        }
    }

    &:last-child {
        margin-bottom: 0;
    }
}





.el-input {
    --el-input-bg-color: #fff;
    --el-input-border-color: #dcdfe6;
    --el-input-hover-border-color: #c0c4cc;
}
</style>